import React from 'react';
import { View, Dimensions, StyleSheet } from 'react-native';
import { createArrayFrom } from 'bee/utils';
import { colors } from 'bee/themes';

export default class DashedBorder extends React.Component {
  render() {
    const { width } = Dimensions.get('window');
    const length = Math.ceil(width / 5);
    const arr = createArrayFrom({ length, start: 0 });

    return (
      <View style={styles.container}>
        {arr.map(v => <View key={v} style={styles.dashed} />)}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
  },
  dashed: {
    height: 1,
    width: 3,
    marginRight: 2,
    backgroundColor: colors[1104],
  },
});
